<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>布局</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0
        }

        .top {
            height: 100px;
            background: blue;
        }

        .head{
            width: 800px;
            height: 100px;
            background: #f60;
            margin: 0 auto;
        }

        .main {
            width: 800px;
            /*高度修改为600px*/
            height: 600px;
            background: #cccccc;
            margin: 0 auto
        }

        .left{
            width: 200px;
            height: 600px;
            background: yellow;
            /*需要进行浮动*/
            float: left;
        }

        .right{
            width: 600px;
            height: 600px;
            background: #369;
            /*需要进行浮动*/
            /*float:left*/
            /*也可以，因为浮动是跟随的*/
            float: right;
        }

        .sub_l{
            width: 400px;
            height: 600px;
            background: green;
            float: left;
        }

        .sub_r{
            width: 200px;
            height: 600px;
            background: #09F;
            float: left;
        }

        .foot {
            width: 800px;
            height: 100px;
            background: #900;
            margin: 0 auto
        }
    </style>
</head>
<body>
<!--
我们只要把一列布局进行其它的改造，就可以把它变成混合布局。
-->
<div class="top">
<!--    比如头部里边再增加一个div，让这个div在top这个区域水平居中-->
    <div class="head"></div>
</div>
<!--
main里面增加一个左右子div，它就可以成为一个上面是单列，中间是两栏，底下是一栏的。
这是咱们很常见的页面。
-->
<div class="main">
    <!--子div-->
    <div class="left"></div>
    <div class="right">
        <div class="sub_l"></div>
        <div class="sub_r"></div>
    </div>
</div>
<div class="foot"></div>
</body>
</html>